{{ $why := .Params.why }}
<div class="relative py-12 md:py-16 lg:py-20 mx-auto max-w-6xl px-8 md:px-4 lg:px-0">
  <div class="text-center">
    {{ partial "home/heading.html" (dict "title" "Why Vector?") }}
  </div>

  <div class="mt-8 md:mt-10">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
      {{ range $why }}
      <div class="flex space-x-4 md:space-x-6 lg:space-x-8">
        {{ with .icon }}
        <div class="flex-0 pt-2">
          {{ $path := printf "img/icons/%s" . }}
          {{ $config := dict "class" "fill-current h-6 w-6"}}
          {{ $icon := resources.Get $path }}
          <div class="flex items-center">
            <div class="w-12 md:w-16 h-auto fill-current">
              {{ $icon.Content | safeHTML }}
            </div>
          </div>
        </div>
        {{ end }}

        <div class="flex flex-col space-y-1">
          <span class="text-lg md:text-xl font-medium tracking-loose dark:text-gray-100">
            {{ .title }}
          </span>

          <div class="prose dark:prose-dark font-light text-sm md:text-base lg:text-lg">
            {{ .description | markdownify }}
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</div>